<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>foria CMS - ver. 0.0.1</title>

	<link type="text/css" href="<?php echo base_url("css"); ?>/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="<?php echo base_url("js"); ?>/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url("js"); ?>/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url("js"); ?>/jquery.jstree.js"></script>
	<script type="text/javascript" src="<?php echo base_url("js"); ?>/jquery.cookie.js"></script>
	<script type="text/javascript" src="<?php echo base_url("js"); ?>/jquery.hotkeys.js"></script>

</head>

<body>

<div id="mmenu" style="height:30px; overflow:auto;">
<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>
<input type="button" id="add_default" value="add file" style="display:block; float:left;"/>
<input type="button" id="rename" value="rename" style="display:block; float:left;"/>
<input type="button" id="remove" value="remove" style="display:block; float:left;"/>
<input type="button" id="cut" value="cut" style="display:block; float:left;"/>
<input type="button" id="copy" value="copy" style="display:block; float:left;"/>
<input type="button" id="paste" value="paste" style="display:block; float:left;"/>
<input type="button" id="clear_search" value="clear" style="display:block; float:right;"/>
<input type="button" id="search" value="search" style="display:block; float:right;"/>
<input type="text" id="text" value="" style="display:block; float:right;" />
</div>


<div id='alog' style="border:1px solid gray; padding:5px; height:100px; margin-top:15px; overflow:auto; font-family:Monospace;"></div>
<div id="demo" class="demo" style="height:auto"></div>


<script>

$(function () {

$("#demo")
	.bind("before.jstree", function (e, data) {
		$("#alog").append(data.func + "<br />");
	})
	.jstree({
		// List of active plugins
		"plugins" : [
			"themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
		],



rules : {
        droppable : [ "tree-drop" ],
        multiple : true,
        deletable : "all",
        draggable : "all"
      },
		// I usually configure the plugin that handles the data first
		// This example uses JSON as it is most common

		"json_data" : {
			"data" : [
				{
					"data" : "A node",
					"metadata" : { id : 23 },
					"children" : [ "Child 1", "A Child 2" ]
				},
				{
					"attr" : { "id" : "li.node.id1" },
					"data" : {
						"title" : "Long format demo",
						"attr" : { "href" : "#" }
					}
				}
			]
		},

/*
		"json_data" : {
			// This tree is ajax enabled - as this is most common, and maybe a bit more complex
			// All the options are almost the same as jQuery's AJAX (read the docs)
			"ajax" : {
				// the URL to fetch the data
				"url" : "<?php echo base_url("test_for_tree/json/"); ?>",
				// the `data` function is executed in the instance's scope
				// the parameter is the node being loaded
				// (may be -1, 0, or undefined when loading the root nodes)
				"data" : function (n) {
					// the result is fed to the AJAX request `data` option
					return {
						"operation" : "get_children",
						"id" : n.attr ? n.attr("id").replace("pages_","") : 0
					};
				}
			}
		},
*/
		// Using types - most of the time this is an overkill
		// read the docs carefully to decide whether you need types
		"types" : {
			// I set both options to -2, as I do not need depth and children count checking
			// Those two checks may slow jstree a lot, so use only when needed
			"max_depth" : -1,
			"max_children" : -1,
			// I want only `drive` nodes to be root nodes
			// This will prevent moving or creating any other type as a root node
			"valid_children" : [ "all" ],
			"types" : {
				// The default type
				"default" : {
					// I want this type to have no children (so only leaf nodes)
					// In my case - those are files
					"valid_children" : [ "default" ],
					// If we specify an icon for the default type it WILL OVERRIDE the theme icons
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/file.png"
					},


				},
				// The `folder` type
				"folder" : {
					// can have files and other folders inside of it, but NOT `drive` nodes
					"valid_children" : [ "default", "folder" ],
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/folder.png"
					}
				},
				// The `drive` nodes
				"drive" : {
					// can have files and folders inside, but NOT other `drive` nodes
					"valid_children" : [ "default", "folder", "drive" ],
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/root.png"
					},

				}
			}
		},
		// UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

		// the UI plugin - it handles selecting/deselecting/hovering nodes
		"ui" : {
			// this makes the node with ID pages_4 selected onload
			//"initially_select" : [ "pages_4" ]
		},
		// the core plugin - not many options here
		"core" : {
			// just open those two nodes up
			// as this is an AJAX enabled tree, both will be downloaded from the server
			//"initially_open" : [ "pages_2" , "pages_3" ]
		}
	})
	.bind("create.jstree", function (e, data) {
		$.ajax({
			async : false,
			type: 'GET',
			dataType: 'json',
			url: "<?php echo base_url("test_for_tree/json/"); ?>",
			data: {
				"operation" : "create_node",
				"id" : data.rslt.parent.attr("id").replace("pages_",""),
				"position" : data.rslt.position,
				"name" : data.rslt.name,
				"type" : data.rslt.obj.attr("rel")
			},
			success: function (r) {
				if(r.status) {
					$(data.rslt.obj).attr("id", "pages_" + r.id);
				}
				else {
					$.jstree.rollback(data.rlbk);
				}
			}
		});
	})
	.bind("remove.jstree", function (e, data) {
		data.rslt.obj.each(function () {
			$.ajax({
				async : false,
				type: 'GET',
				dataType: 'json',
				url: "<?php echo base_url("test_for_tree/json/"); ?>",
				data : {
					"operation" : "remove_node",
					"id" : this.id.replace("pages_","")
				},
				success : function (r) {
					if(!r.status) {
						data.inst.refresh();
					}
				}
			});
		});
	})
	.bind("rename.jstree", function (e, data) {
	$.ajax({
		async : false,
		type: 'GET',
		dataType: 'json',
		url: "<?php echo base_url("test_for_tree/json/"); ?>",
		data : {
			"operation" : "rename_node",
			"id" : data.rslt.obj.attr("id").replace("pages_",""),
			"name" : data.rslt.new_name
		},
		success : function (r) {
			if(!r.status) {
				$.jstree.rollback(data.rlbk);
			}
		}
	});
	})
	.bind("move_node.jstree", function (e, data) {
		data.rslt.o.each(function (i) {
			$.ajax({
				async : false,
				type: 'GET',
				dataType: 'json',
				url: "<?php echo base_url("test_for_tree/json/"); ?>",
				data : {
					"operation" : "move_node",
					"id" : $(this).attr("id").replace("pages_",""),
					"ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("pages_",""),
					"position" : data.rslt.cp + i,
					"title" : data.rslt.name,
					"copy" : data.rslt.cy ? 1 : 0
				},
				success : function (r) {
					if(!r.status) {
						$.jstree.rollback(data.rlbk);
					}
					else {
						$(data.rslt.oc).attr("id", "pages_" + r.id);
						if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
							data.inst.refresh(data.inst._get_parent(data.rslt.oc));
						}
					}
					//$("#analyze").click();
				}
			});
		});
	});

});

</script>


<div id="demo1" class="demo">

	<ul>

		<li id="phtml_1">

			<a href="#">Root node 1</a>

			<ul>

				<li id="phtml_2">

					<a href="#">Child node 1</a>

				</li>

				<li id="phtml_3">

					<a href="#">Child node 2</a>

				</li>

			</ul>

		</li>

		<li id="phtml_4">

			<a href="#">Root node 2</a>

		</li>

	</ul>

</div>

<script type="text/javascript" class="source">

$(function () {
	$("#demo1").jstree({
		"json_data" : {
			// This tree is ajax enabled - as this is most common, and maybe a bit more complex
			// All the options are almost the same as jQuery's AJAX (read the docs)
			"ajax" : {
				// the URL to fetch the data
				"url" : "<?php echo base_url("test_for_tree/json/"); ?>",
				// the `data` function is executed in the instance's scope
				// the parameter is the node being loaded
				// (may be -1, 0, or undefined when loading the root nodes)
				"data" : function (n) {
					// the result is fed to the AJAX request `data` option
					return {
						"operation" : "get_children",
						"id" : n.attr ? n.attr("id").replace("pages_","") : 0
					};
				}
			}
		},

		// Using types - most of the time this is an overkill
		// read the docs carefully to decide whether you need types
		"types" : {
			// I set both options to -2, as I do not need depth and children count checking
			// Those two checks may slow jstree a lot, so use only when needed
			//"max_depth" : -1,
			//"max_children" : -1,
			// I want only `drive` nodes to be root nodes
			// This will prevent moving or creating any other type as a root node
			//"valid_children" : [ "all" ],

			"types" : {
				// The default type
				"default" : {
					// I want this type to have no children (so only leaf nodes)
					// In my case - those are files
					"valid_children" : [ "default" ],
					// If we specify an icon for the default type it WILL OVERRIDE the theme icons
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/file.png"
					},


				},
				// The `folder` type
				"folder" : {
					// can have files and other folders inside of it, but NOT `drive` nodes
					"valid_children" : [ "default", "folder" ],
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/folder.png"
					}
				},
				// The `drive` nodes
				"drive" : {
					// can have files and folders inside, but NOT other `drive` nodes
					"valid_children" : [ "default", "folder", "drive" ],
					"icon" : {
						"image" : "<?php echo base_url("js/sysimg"); ?>/root.png"
					},

				}
			}
		},

		"plugins" : [ "themes","json_data","ui","crrm","cookies","dnd","types","hotkeys","contextmenu" ],
		// Using types - most of the time this is an overkill
		// read the docs carefully to decide whether you need types
	});
});

</script>


</body>
</html>